<style>
    .table-responsive {overflow-x: inherit}
    td {vertical-align: middle !important;}
    .node-list li{display: inline-block}
    .buttonbor{display: block;border-bottom: 10px solid #fff;}

</style>
<div>
    <div class="bg-light lter b-b wrapper-md">
        <h1 class="m-n font-thin h3">订单详情
            <div class="pull-right">
                <a  class="btn btn-sm btn-default" onclick="history.go(-1)">返回列表</a>
            </div>
        </h1>
    </div>
    <div class="padder-md m-b-none m-t" style="padding-top: 0">
        <div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">基本信息</div>
                    <div class="panel-body">
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">订单号 ：  </label>{{ctrl.vm.data.base.id}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">下单时间 ： </label>{{ctrl.vm.data.base.created_at}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">订单状态 ：  </label>
                                <span class="label bg-info" ng-if="ctrl.vm.data.base.status==1">新订单</span>
                                <span class="label bg-success" ng-if="ctrl.vm.data.base.status==2">已支付</span>
                                <span class="label bg-info" ng-if="ctrl.vm.data.base.status==3">已发货</span>
                                <span class="label bg-success" ng-if="ctrl.vm.data.base.status==4">已收货</span>
                                <span class="label bg-dark" ng-if="ctrl.vm.data.base.status==-1">用户取消</span>
                                <span class="label bg-danger" ng-if="ctrl.vm.data.base.status==-2">系统取消</span>
                                <!--{{ctrl.vm.data.base.status}}-->
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">订单IP ：  </label>{{ctrl.vm.data.base.remote_ip}}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">用户信息</div>
                    <div class="panel-body">
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">用户ID ： </label>{{ctrl.vm.data.user.id}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">邮政账户 ：</label>{{ctrl.vm.data.user.email}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">手机账户 ： </label>{{ctrl.vm.data.user.phone}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">用户组 ： </label>{{ctrl.vm.data.user.id}}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">配送地址</div>
                    <div class="panel-body">
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label>
                                    {{ctrl.vm.data.order_address.country}}
                                    {{ctrl.vm.data.order_address.province}}
                                    {{ctrl.vm.data.order_address.city}}
                                </label>
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label>
                                    {{ctrl.vm.data.order_address.street}}
                                    {{ctrl.vm.data.order_address.postcode}}
                                </label>
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label>
                                    {{ctrl.vm.data.order_address.name}}
                                    {{ctrl.vm.data.order_address.tel}}
                                </label>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">配送</div>
                    <div class="panel-body">
                    <div class="panel panel-default" style="margin-bottom: 0">
                        <div class="panel-heading" ng-if="ctrl.vm.data2.delivered.length">已发货</div>
                        <div class="panel-body">
                            <div class="table-responsive">
                            <table class="table table-striped table-bordered b-t b-light">
                                <thead ng-if="ctrl.vm.data2.delivered.length">
                                <tr>
                                    <th style="padding-left: 30px">快递</th>
                                    <th>单号</th>
                                    <th width="20%">商品</th>
                                    <th >规格</th>
                                    <th>数量</th>
                                    <th>时间</th>
                                </tr>
                                </thead>
                                <tbody style="padding-left: 30px">
                                <tr ng-repeat="data in ctrl.vm.data2.delivered">
                                    <td style="padding-left: 30px">{{data.name}}</td>
                                    <td>{{data.express_id}}</td>
                                    <td>
                                        <div ng-repeat="item in data.product" style="margin: 10px 0">
                                            {{item.name}}
                                        </div>
                                    </td>
                                    <td>
                                        <div ng-repeat="item in data.product"  style=" margin: 5px 0">
                                            {{item.attr_value_name}}
                                        </div>
                                    </td>
                                    <td>
                                        <div ng-repeat="item in data.product"  style=" margin: 5px 0">
                                            {{item.qty}}
                                        </div>
                                    </td>
                                    <td>
                                        {{data.created_at}}
                                    </td>
                                </tr>
                                <tr ng-if="!ctrl.vm.data2.delivered.length" style="height: 50px">
                                    <td colspan="12" class="text-center">暂无数据！</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        </div>
                    </div>
                    <div class="panel-body"  ng-if="ctrl.vm.data2.not_delivered.length&&ctrl.vm.data.base.status==2">
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <button class="btn btn-sm btn-success"  ui-sref="app.order.express({id:ctrl.vm.data.base.id})">发货</button>
                            </div>
                        </form>
                    </div>
                    <div ng-if="!ctrl.vm.data2.not_delivered.length"  style="padding: 30px">
                        <td colspan="12" class="text-center">全部商品发货完毕</td>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">支付信息</div>
                    <div class="panel-body" ng-if="ctrl.vm.data.payment.status>0">

                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">支付方式 ：</label> {{ctrl.vm.data.base.payment_name}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">支付单号 ：</label> {{ctrl.vm.data.payment.transaction_id}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">流水号 ：</label> 暂无
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">支付设备 ： </label>{{ctrl.vm.data.payment.device}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">支付时间 ： </label>{{ctrl.vm.data.payment.time}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group" style="color: #00a8f3;cursor: pointer" ng-click="">
                                未成功支付记录(暂无)
                            </div>
                        </form>
                    </div>
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group" ng-if="ctrl.vm.data.payment.length==0" style="padding: 15px">
                            暂未支付
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="panel panel-default">
                    <div class="panel-heading font-bold">配送方式</div>
                    <div class="panel-body">
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">配送方式 ： </label>{{ctrl.vm.data.base.shipping_name}}
                            </div>
                        </form>
                        <form role="form" class="ng-pristine ng-valid">
                            <div class="form-group">
                                <label style="width: 12%;text-align: right">费用 ： </label>{{ctrl.vm.data.base.shipping_amount|currency : '$'}}
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">买家留言</div>
                <div class="panel-body">
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label>
                                <textarea class="form-control" ng-model="ctrl.vm.data.base.message" style="width: 400px;"></textarea>
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">商品清单</div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered b-t b-light">
                                <thead>
                                <tr>
                                    <th width="20%">图片</th>
                                    <th width="20%">商品名称</th>
                                    <th>规格</th>
                                    <th>数量</th>
                                    <th>单价(元)</th>
                                    <th>小计</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr ng-repeat="data in ctrl.vm.data.order_product">
                                    <td>
                                        <img  ng-src="{{data.images[0].url | imgwhq:100:200:90}}" alt="">
                                    </td>
                                    <td>{{data.name}}</td>
                                    <td>{{data.attr_value_name}}</td>
                                    <td>{{data.qty}}</td>
                                    <td>{{data.price|currency : '$'}}</td>
                                    <td>{{data.price*data.qty|currency : '$'}}</td>

                                </tr>
                                <tr ng-if="!ctrl.vm.data.order_product.length">
                                    <td colspan="12" class="text-center">暂无数据！</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">备注</div>
                <div class="panel-body">
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label>
                                <textarea ng-model="ctrl.vm.comment" class="form-control" style="width: 400px;"></textarea>
                            </label>
                        </div>
                    </form>
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label>
                                <button class="btn btn-sm btn-primary" ng-click="ctrl.vm.addComment()">备注</button>
                            </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">结算</div>
                <div class="panel-body">
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label style="width: 12%;text-align: right">商品金额 ： </label>{{ctrl.vm.data.base.sub_total|currency : '$'}}
                        </div>
                    </form>
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label style="width: 12%;text-align: right">运费 ： </label>{{ctrl.vm.data.base.shipping_amount|currency : '$'}}
                        </div>
                    </form>
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label style="width: 12%;text-align: right">优惠 ： </label>{{ctrl.vm.data.base.discount_amount|currency : '$'}}
                        </div>
                    </form>
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label style="width: 12%;text-align: right">总计 ： </label>{{ctrl.vm.data.base.grand_total|currency : '$'}}
                        </div>
                    </form>
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label style="width: 12%;text-align: right">支付金额 ： </label>{{ctrl.vm.data.base.total_paid|currency : '$'}}
                            <span ng-if="ctrl.vm.data.base.status==1" style="color: #00a8f3;cursor:pointer ;padding-left: 10px" ng-click="ctrl.vm.chengeMoney(ctrl.vm.data)">修改支付金额</span>
                        </div>
                    </form>
                    <form role="form" class="ng-pristine ng-valid">
                        <div class="form-group">
                            <label style="width: 12%;text-align: right">退款 ： </label>{{ctrl.vm.data.base.total_refunded|currency : '$'}}
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">历史备注信息</div>
                <div class="panel-body">
                    <div class="col-sm-4" ng-repeat="data in ctrl.vm.data.comment" style="border-top: 1px solid #e5e5e5;border-left: 5px solid #fff;border-bottom: 5px solid #fff;background-color: #F6F8F8">
                        <div class="form-group row" style="padding-top: 15px">
                            <label ng-if="data.worker_id>0" class="col-sm-2 control-label text-right" style="padding-top: 5px">管理员:</label>
                            <label ng-if="data.worker_id==0" class="col-sm-2 control-label text-right" style="padding-top: 5px">系统:</label>
                            <div class="col-sm-6" style="padding-top: 4px">
                                {{data.worker_id}}
                            </div>
                        </div>
                        <div class="form-group row" style="padding-top: 15px">
                            <label class="col-sm-2 control-label text-right" style="padding-top: 5px">时间:</label>
                            <div class="col-sm-6" style="padding-top: 4px">
                                {{data.created_at}}
                            </div>
                        </div>
                        <div class="form-group row" style="padding-top: 15px">
                            <label class="col-sm-2 control-label text-right" style="padding-top: 5px">内容:</label>
                            <div class="col-sm-6" style="padding-top: 4px">
                                {{data.comment}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script type="text/ng-template" id="chengeMoney.html">
    <div class="modal-header">
        <h3 class="modal-title">修改支付金额</h3>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group row" style="padding-top: 15px">
                    <label class="col-sm-5 control-label text-right" style="padding-top: 5px">原支付金额:</label>
                    <div class="col-sm-6" style="padding-top: 5px">
                        <!--{{total_paid|currency : '￥'}}-->
                        <input type="text"  class="form-control" ng-model="total_paid|currency : '$'" readonly style="background-color: #fff" >
                    </div>
                </div>
                <div class="form-group row" style="padding-top: 15px">
                    <label class="col-sm-5 control-label text-right" style="padding-top: 5px">金额修改为:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" ng-model="newTotal_paid" required="required" >
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <!--<button class="btn btn-default" ng-click="cancel()">取消</button>-->
        <button class="btn btn-success" ng-click="ok()">修改</button>
    </div>
</script>